<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
</style>
<title>Insert title here</title>
<script src="../lib/jquery-2.1.1.js"></script>
<script>
var cnt = 0;
$(document).ready(function(){
	// UI 지정
	$('#menu1, #menu2').css({
		'width' : '200px',
		'padding' : '10px',
		'border' : '3px solid #FF9436',
		'border-radius' : '5px',
		'font-family' : 'Nanum Gothic Coding, serif',
		'text-align' : 'center'
	});
	
	$('#menu1, #menu2').hover(
		function(){
			$(this).css({
				'box-shadow' : '3px 3px 10px #BDBDBD',
				'cursor' : 'pointer'
			});
		},
		function(){
			$(this).css({
				'box-shadow' : '',
				'cursor' : ''
			});
		}
	);
	
	
	$('#item1, #item2').css({
		'width' : '200px',
		'padding' : '10px',
		'border' : '3px solid #FF9436',
		'border-radius' : '5px',
		'font-family' : 'Nanum Gothic Coding, serif',
		'position' : 'absolute',
		'text-align' : 'center'
	});
	
	$('#item1, #item2').hover(
		function(){
			$(this).css({
				'box-shadow' : '3px 3px 10px #BDBDBD',
				'cursor' : 'pointer'
			});
		},
		function(){
			$(this).css({
				'box-shadow' : '',
				'cursor' : ''
			});
		}
	);
	
	$('#item1, #item2').hide();
	$('#menu1').click(function(){
		$('#item1').toggle(500);
		$('#item2').hide(700);
	});
	$('#menu2').click(function(){
		$('#item2').toggle(500);
		$('#item1').hide(700);
	});
	
});
</script>
</head>
<body>

	<div style="width: 300px; float:left">
		<div id="menu1">파일 메뉴</div>
		<p/>
		<div id="item1">
			<ul>
				<li>파일 읽기</li>
				<li>파일 저장</li>
				<li>새이름으로 저장</li>
				<li>파일명 변경</li>
			</ul>
		</div>
	</div>
	
	<div style="width: 300px; float:left">
		<div id="menu2">파일 메뉴</div>
		<p/>
		<div id="item2">
			<ul>
				<li>아이엠</li>
				<li>류지훈</li>
				<li>유얼어</li>
				<li>영맨</li>
			</ul>
		</div>
	</div>
	
	<p/>
	<br/>


</body>
</html>